<template>
	<div class="second-menu-box">
		<!--<p>{{$store.state.eduStore}}</p>-->
		<header>
			<div class="toBack" @click="back">
				<Iconfont iconClass="right" />
			</div>
			<p>分类</p>			
		</header>		
		<div class="conect-box">
			<ul>
				<li v-for="(v,vIndex) in dataArray" key="v.id" :class="[$store.state.eduStore.eduParentId==v.id?'curParentClass':'']"  @click.stop="clickParent(vIndex,v.id)">					
					<p class="leftStyle-p" >{{v.tagName}}</p>
					<div class="right-style" v-if="$store.state.eduStore.eduParentId==v.id">
						<!--{{$store.state.eduStore}}-->
						<div class="erjiClass">
							<div v-for="w in  v.children" class="erji-p" key="w.id" >							
								<p class="erji-text">{{w.tagName}}</p>
								 <div class="sanjiClass">
									<p v-for="(j,jIndex)  in w.children" class="sanji" :class="[$store.state.eduStore.eduSonId==j.id?'curClass':'']" @click.stop="clickSJMenu(jIndex,j.id)">{{j.tagName}}</p>
								</div>
							</div>							
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	//$store.state.eduStore.eduParentId
	export default {
		data() {
			return {
				curParentClass:'',//左边选中状态
				dataArray:JSON.parse(window.localStorage.getItem("numNavData")), //数组数据
				curClass:'',//三级菜单添加class
				parentNum:'',//左边数组默认数字
				num:'',
			}
		},
		components: {},
		created() {
			this.parentNum = this.$route.query.tagId
			//this.$store.dispatch('setEduChildId','')
			//window.sessionStorage.setItem('eduParentIndex',0)
		},
		methods: {
			//点击返回
			back(){
				//this.$router.push(`/${this.$channel}/educationHome`)
				this.$router.push({
					path:`/${this.$channel}/educationHome`,
					query:{//父标签的id
						id:this.$route.query.id
					}
				})
			},
			//点击三级菜单
			clickSJMenu(index,id){
				//console.log(id)
				this.$store.dispatch('setEduSonId',id)//三级id
				setTimeout(()=>{
					this.$router.push({
						path:`/${this.$channel}/educationHome`,
						query:{//父标签的id
							id:this.$route.query.id
						}
				})
				},100)
				JSON.parse(window.localStorage.getItem("numNavData")).map((item,index)=>{
					//console.log(item)
					if(item.children.length){
						item.children.map((i,index)=>{
							//console.log(i)
							if(i.children.length){
								i.children.map((h)=>{
									if(h.id==id){
									this.$store.dispatch('setEduChildId',i.id)//二级id
									this.$store.dispatch('setEduSonId',h.id)//三级id
									}
								})
							}
						})
					}
				})
			},
			//点击左边的菜单栏
			clickParent(index,id){
				this.parentNum = id;
				this.$store.dispatch('setEduParentId',id);
				this.$store.dispatch('setEduChildId',this.dataArray[index].children[0].id);
			},
		}
	}
</script>

<style scoped="scoped">
	.curParentClass{
		color: #F12200 !important;
		background: white !important;
	}
	.curParentClass .leftStyle-p{
		color: #F12200 !important;
	}
	.curParentClass .leftStyle-p::after{
		content: "";
		display: block;
		position: absolute;
		transform-origin: 0 0;
		width: 6px;
		top:-2px;
		left: 1px;
		height: 64px;
		transform-origin: left 0;
		background: red;
		background:linear-gradient(0deg,rgba(255,0,0,1),rgba(255,98,72,1));
		border-radius: 3px;
	}
	.curClass{
		background:#F12200 !important;
		color: white !important;
		border:2px solid #F12200 !important;
	}
	.second-menu-box {
		width: 100vw;
		height: 100vh;
		background: white;
	}	
	header {
		width: 100%;
		height: 80px;
		border-bottom: 2px solid rgba(243, 243, 243, 1);
	}
	
	header .toBack {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 20px;
	}
	
	header .toBack i {
		font-size: 34px;
		color: #000;
	}
	
	header p {
		width: 100%;
		height: 80px;
		text-align: center;
		line-height: 80px;
	}
	
	.conect-box ul {
		width: 200px;
		height: calc(100vh - 80px);
		background:#F3F3F3;
	}
	
	.conect-box ul li {
		width: 200px;
		height: 110px;
		background: #F8F8F8;
		border-bottom: 1px solid rgba(243, 243, 243, 1);
		padding-top: 25px;
	}
	
	.leftStyle-p {
		font-size: 28px;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		/*background: sandybrown;*/
		line-height: 64px;
		text-align: center;
		position: relative;
	}
	
	.right-style {
		width: calc(100vw - 200px);
		height: calc(100vh - 80px);
		background: rgba(255, 255, 255, 1);
		/*box-shadow: 0px 8px 10px 0px rgba(51, 51, 51, 0.04);
		border-radius: 20px;*/
		position: absolute;
		top: 80px;
		right: 0;
		background: white;
		overflow-y:scroll ;
		overflow-x: hidden;
	}
	
	.erji-p {
		font-size: 28px;
		font-weight: 500;
		color: #333333;
		margin: 20px 0 30px 40px;
	}
	.sanjiClass{
		
	}
	.sanji{
		min-width:140px;
		max-width: 460px;
		height:60px;
		background:white;
		font-size:24px;
		font-weight:400;
		color:#333333;
		text-align: center;
		line-height: 62px;
		display: inline-block;
		padding: 0 15px;
		margin: 0 23px 30px 0;
		border:2px solid rgba(192,192,192,1);
        border-radius:12px;
         overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.erji-text{
		line-height: 80px;
		font-size:28px;
		font-weight:500;
		color:rgba(51,51,51,1);
		max-width: 460px;
		 overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>